<script setup>
import KOfooter from '@/components/KOfooter/KOfooter.vue'
import KOheader from '@/components/KOheader/KOheader.vue'
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route.query.url)

const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? (innerWidth.value = false) : (innerWidth.value = true)
})
const handleResize = () => {
  window.innerWidth < 1000 ? (innerWidth.value = false) : (innerWidth.value = true)
}
watch(() => window.innerWidth, handleResize)

const toMJUI=()=>{
  router.push({
    path: '/MJUI'
  })
}

const priceOMMH = [
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/e16b276c-9686-47ee-aef1-c9e0d5c813ae/w300h300t1.png',
    name: 'OMMH | 覺知净化洗髮露',
    oldjia: 'NT$ 780',
    newjia: 'NT$ 680'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/569c8f8d-2244-4b8f-a27b-a022a56657f9/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/9f08ab8f-7d96-4277-bf86-cf167553023d/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/3ad119b6-4987-4137-bf49-3162f52cf6bd/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  },
  {
    url: 'https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png',
    name: 'OMMH｜光譜還原護髮膜',
    oldjia: 'NT$ 880',
    newjia: 'NT$ 780'
  }
]
const N = ref('')
const oer = (name) => {
  N.value = name
  look.value = true
}
const look = ref(false)
const leave = () => {
  look.value = false
}
const toPOOL = () => {
  router.push({
    path: '/POOL'
  })
}
</script>

<template>
  <div v-if="innerWidth" class="ETCH">
    <KOheader />
    <div style="display: flex">
      <!-- 左 -->
      <div style="width: 50%; padding-top: 20px; padding-left: 30px">
        <img style="width: 80%; height: 500px" :src="route.query.url" alt="" />
        <img
          style="width: 80%"
          src="https://cdn.quickper.com/media/tagskin/product/1957d538-49be-4efc-b725-9d87b5725885/w800h800t1.png"
          alt=""
        />
        <img
          style="width: 80%"
          src="https://cdn.quickper.com/media/tagskin/product/f17d4573-21b6-4924-ab91-01b78985f11c/w800h800t1.png"
          alt=""
        />
      </div>
      <!-- 右 -->
      <div style="width: 50%; padding-top: 20px; padding-right: 20%">
        <div style="font-weight: 700; font-size: 20px">{{ route.query.name }}</div>
        <div style="margin-top: 6px">
          <span style="text-decoration: line-through; font-weight: 700"
            >{{ route.query.oldjia }} </span
          ><span style="margin-left: 10px; color: red; font-weight: 700">{{
            route.query.newjia
          }}</span>
        </div>
        <div style="margin-top: 6px; color: #999">
          OMMH / <span style="font-weight: 700; color: black">洗髮</span>
        </div>
        <div
          style="
            margin-top: 6px;
            color: #999;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          E10005127
        </div>
        <div style="margin-top: 20px; font-size: 14px">
          淨化配方不含矽靈，加入了具溫和效用的自然植物，協助清除多餘油脂而不刺激頭皮，平衡頭皮PH值，同時為秀髮帶來豐盈感和光澤。
        </div>
        <div
          style="
            font-weight: 700;
            font-size: 14px;
            margin-top: 40px;
            text-decoration: underline;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          查看更多
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <div
            class="image-container"
            style="width: 15%; margin: 10px 10px"
            v-for="item in priceOMMH"
            :key="item"
          >
            <img
              style="width: 100%"
              @mouseenter="oer(item.name)"
              @mouseleave="leave"
              :src="item.url"
              alt=""
            />
          </div>
        </div>
        <div
          v-if="look"
          style="
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            background-color: #f6f5f5;
            color: #999;
          "
        >
          {{ N }}
        </div>
        <!-- 优惠卷 -->
        <div style="display: flex; margin-top: 20px">
          <img
            style="width: 20px; height: 20px; margin-top: 2px"
            src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg"
            alt=""
          />
          <div style="font-weight: 700; margin-left: 10px">TAG SKIN多用潔顏巾-加購優惠</div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <img
            style="width: 20px; height: 20px; margin-top: 2px"
            src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg"
            alt=""
          />
          <div style="font-weight: 700; margin-left: 10px">覺知淨化洗髮露瓶-滿件折現</div>
        </div>
        <div style="text-decoration: underline; font-weight: 700; margin-top: 10px">
          展開所有優惠
        </div>
        <div
          style="
            color: #d5d5d5;
            margin-top: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          ＊ 活動優惠以購物車結帳計算為準。
        </div>
        <button
          @click="toMJUI"
          style="
            width: 100%;
            margin-top: 10px;
            border-radius: 10px;
            height: 35px;
            color: #fff;
            background-color: #000;
          "
        >
          購買
        </button>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 30px;
            border-top: 1px solid #d5d5d5;
          "
        >
          <div style="font-weight: 700; font-size: 14px">運送方式</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 15px">
          <div style="font-weight: 700; font-size: 14px">運送說明</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 15px">
          <div style="font-weight: 700; font-size: 14px">電子發票</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- 开店 -->
    <div
      style="
        width: 97%;
        height: 250px;
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: #f8f8f8;
        border-radius: 30px;
      "
    >
      <div
        style="
          position: relative;
          top: 20px;
          margin-left: 20px;
          border-radius: 20px;
          background-color: #fff;
          width: 60%;
          height: 70%;
        "
      >
        <div style="font-size: 25px; position: relative; left: 20px; top: 20px">我想開店？</div>
        <div style="margin-top: 30px; margin-left: 20px">
          立即成為 FIRR 的分店，並販售更多的商品吧！
        </div>
        <button
          style="
            width: 100px;
            margin-top: 30px;
            margin-left: 20px;
            height: 40px;
            background-color: #000;
            color: #fff;
            border-radius: 30px;
          "
          @click="toPOOL"
        >
          立即前往
        </button>
      </div>
      <div style="color: #999; margin-top: 30px; margin-left: 20px">
        ＊為了確保您的付款安全，切勿透過網站或應用程式以外的方式進行匯款或交易。
      </div>
    </div>
    <KOfooter />
  </div>
  <div class="ETCH" v-else>
    <KOheader />
    <div
      @click="toPOOL"
      style="
        margin-top: -2px;
        font-weight: 700;
        background-color: #f6f5f5;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
      "
    >
      我想加入 FIRR ？
    </div>
    <!-- 商品轮播图 -->
    <swiper :slides-per-view="1" :space-between="0" :autoplay="{ delay: 3000 }">
      <swiper-slide
        style="width: 100%; height: 390px; position: relative"
      >
        <img style="width: 100%; height: 390px" :src="route.query.url" alt="" />
      </swiper-slide>
      <swiper-slide
        style="width: 100%; height: 390px; position: relative"
      >
        <img
          style="width: 100%; height: 390px;"
          src="https://cdn.quickper.com/media/tagskin/product/1957d538-49be-4efc-b725-9d87b5725885/w800h800t1.png"
          alt=""
        />
      </swiper-slide>
      <swiper-slide
        style="width: 100%; height: 390px; position: relative"
      >
        <img
        style="width: 100%; height: 390px;"
          src="https://cdn.quickper.com/media/tagskin/product/f17d4573-21b6-4924-ab91-01b78985f11c/w800h800t1.png"
          alt=""
        />
      </swiper-slide>
    </swiper>
    <div style="width: 100%; padding-top: 20px; padding-left: 20px;padding-right:20px ;">
        <div style="font-weight: 700; font-size: 20px">{{ route.query.name }}</div>
        <div style="margin-top: 6px">
          <span style="text-decoration: line-through; font-weight: 700"
            >{{ route.query.oldjia }} </span
          ><span style="margin-left: 10px; color: red; font-weight: 700">{{
            route.query.newjia
          }}</span>
        </div>
        <div style="margin-top: 6px; color: #999">
          OMMH / <span style="font-weight: 700; color: black">洗髮</span>
        </div>
        <div
          style="
            margin-top: 6px;
            color: #999;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          E10005127
        </div>
        <div style="margin-top: 20px; font-size: 14px">
          淨化配方不含矽靈，加入了具溫和效用的自然植物，協助清除多餘油脂而不刺激頭皮，平衡頭皮PH值，同時為秀髮帶來豐盈感和光澤。
        </div>
        <div
          style="
            font-weight: 700;
            font-size: 14px;
            margin-top: 40px;
            text-decoration: underline;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          查看更多
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <div
            class="image-container"
            style="width: 15%; margin: 10px 10px"
            v-for="item in priceOMMH"
            :key="item"
          >
            <img
              style="width: 100%"
              @mouseenter="oer(item.name)"
              @mouseleave="leave"
              :src="item.url"
              alt=""
            />
          </div>
        </div>
        <div
          v-if="look"
          style="
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            background-color: #f6f5f5;
            color: #999;
          "
        >
          {{ N }}
        </div>
        <!-- 优惠卷 -->
        <div style="display: flex; margin-top: 20px">
          <img
            style="width: 20px; height: 20px; margin-top: 2px"
            src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg"
            alt=""
          />
          <div style="font-weight: 700; margin-left: 10px">TAG SKIN多用潔顏巾-加購優惠</div>
        </div>
        <div style="display: flex; margin-top: 5px">
          <img
            style="width: 20px; height: 20px; margin-top: 2px"
            src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg"
            alt=""
          />
          <div style="font-weight: 700; margin-left: 10px">覺知淨化洗髮露瓶-滿件折現</div>
        </div>
        <div style="text-decoration: underline; font-weight: 700; margin-top: 10px">
          展開所有優惠
        </div>
        <div
          style="
            color: #d5d5d5;
            margin-top: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          ＊ 活動優惠以購物車結帳計算為準。
        </div>
        <button
         @click="toMJUI"
          style="
            width: 100%;
            margin-top: 10px;
            border-radius: 10px;
            height: 35px;
            color: #fff;
            background-color: #000;
          "
        >
          購買
        </button>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 30px;
            border-top: 1px solid #d5d5d5;
          "
        >
          <div style="font-weight: 700; font-size: 14px">運送方式</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 15px">
          <div style="font-weight: 700; font-size: 14px">運送說明</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 15px">
          <div style="font-weight: 700; font-size: 14px">電子發票</div>
          <img
            style="width: 10px; height: 10px; margin-top: 7px"
            src="https://cdn.quickper.com/static/img/icons/plus.png"
            alt=""
          />
        </div>
    </div>
    <div
      style="
        width: 90%;
        height: 250px;
        margin-top: 40px;
        margin-left: 20px;
        margin-right: 20px;
        background-color: #f8f8f8;
        border-radius: 30px;
      "
    >
      <div
        style="
          position: relative;
          top: 20px;
          margin-left: 20px;
          border-radius: 20px;
          background-color: #fff;
          width: 80%;
          height: 70%;
        "
      >
        <div style="font-size: 25px; position: relative; left: 20px; top: 20px">我想開店？</div>
        <div style="margin-top: 30px; margin-left: 20px">
          立即成為 FIRR 的分店，並販售更多的商品吧！
        </div>
        <button
          style="
            width: 100px;
            margin-top: 10px;
            margin-left: 20px;
            height: 40px;
            background-color: #000;
            color: #fff;
            border-radius: 30px;
          "
          @click="toPOOL"
        >
          立即前往
        </button>
      </div>
      <div style="color: #999; margin-top: 30px; margin-left: 20px;font-size: 12px;">
        ＊為了確保您的付款安全，切勿透過網站或應用程式以外的方式進行匯款或交易。
      </div>
    </div>
    <KOfooter />
  </div>
</template>

<style scoped lang="scss">
.ETCH {
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.image-container:hover {
  border: 1px solid black;
}
</style>
